{include "INC_header.html" title="模板管理"}
<div id="app-outlet" class="app-outlet" style="padding: 0;">
    <div class="app-container">
        <header class="padding auto-height light-background border-bottom">
            <div class="ui flex-item">
                <div class="center"></div>
                <div class="end">
                    <div class="ui button">模板下载中心</div>
                </div>
            </div>
        </header>
        <main>
            <div class="cms-templates" v-if="list.length > 0">
                <div class="item" v-for="item in list">
                    <div class="preview">
                        <img :src="item.screenshot">
                    </div>
                    <div class="name">{{ item.name }}</div>
                </div>
            </div>
            <div class="empty-content margin" v-else>
                <a-empty :image="simpleImage" description="没有模板，请前往模板中心下载"></a-empty>
            </div>
        </main>
    </div>
</div>
<script>
    //vue app
    const { createApp, defineComponent, ref } = Vue;
    const { message, Empty } = antd;
    const app = createApp({
        data() {
            return {
                //空图片
                simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
                //数据
                list: []
            }
        },
        mounted() {
            //挂载成功
            this.initData();
        },
        methods: {
            //方法
            initData: function () {
                //获取列表数据
                this.getList();
            },
            //获取列表
            getList : function (){
                let self = this;
                const hide = message.loading("正在加载数据");
                axios.get("{url url='/cms/api/template/list'}").then(({ data }) => {
                    hide();
                    if (data.error === 0) {
                        self.list = data.data;
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    hide();
                    message.error("加载数据失败");
                });
            }
        }
    }).use(antd);
    //挂载
    const vm = app.mount("#app-outlet");
</script>
{include "INC_footer.html"}